<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>百度搜索数据展示</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    :root {
      --display: none;
    }

    body {
      display: flex;
      justify-content: center;
    }

    ul {
      list-style: none;
    }

    content.search {
      margin-top: 100px;
      width: 450px;
      height: 50px;
      position: relative;
      display: flex;
      justify-content: space-between;
    }

    input {
      -webkit-appearance: none;
      appearance: none;
      /* 修改所有元素或其父元素的属性为初始值： */
      all: initial;
      border: 2px solid #eef0ef;
      font-size: 18px;
      border-radius: 4px;
    }

    input[type=text] {
      flex: 0.78;
      padding: 10px;
      color: #7a8682;
    }

    input[type=submit] {
      flex: 0.2;
      text-align: center;
      cursor: pointer;
      letter-spacing: 2px;
      background-color: #dfdfde;
    }

    input[type=submit]:active {
      background-color: #bab7ae;
    }

    content.search>ul {
      position: absolute;
      background-color: yellow;
      left: 0;
      right: 0;
      top: 100%;
      max-height: 300px;
      display: var(--display);
    }

    content.search>ul>li {
      cursor: pointer;
      height: 40px;
      padding: 0 10px;
      display: flex;
      align-items: center;
      font-size: 18px;
      border-bottom: 1px solid red;
      transition: all .3s;
    }

    content.search>ul>li:hover {
      background-color: deeppink;
    }
  </style>
</head>

<body>
  <content class="search">
    <input type="text" placeholder="请输入内容" autofocus>
    <input type="submit" id="submit">
    <ul class="show"></ul>
  </content>
</body>
<script>
  "use strict"; {
    const ul = document.querySelector(".show");
    const text = document.querySelector("input[type=text]");
    const dom_style = getComputedStyle(document.documentElement);
    const style = document.documentElement.style;
    const show = document.querySelector(".show");
    console.log(show);

    let data = ["我们的家1122", "脑功能", "我自己的了", "我tmd", "狗比", "你好", "n你"];
    // let ii = style.getPropertyValue("--display").trim();
    text.addEventListener("input", (e) => {
      style.setProperty("--display", "block");
      let str_li = "";
      data.forEach((item, key, arr) => {
        let res = item.indexOf(text.value);
        if (~res) {
          str_li += `<li>${item}</li>`;
        };
      });
      if (!text.value.trim() || !str_li) { //文本不能为空
        show.innerHTML = `<li>暂无结果</li>`;
      } else {
        show.innerHTML = str_li;
      };
    });
    text.addEventListener("blur", (e) => {
      style.setProperty("--display", "none");
      text.value = "";
    });
  };
</script>

</html>